<template>
    <div id="home-box">
        <!--      头部搜索-->
        <van-sticky>
        <div id="header-box">
            <van-row type="flex" justify="space-between">
                <van-col span="6">
                    <div style="margin-top:15px">
                        <van-image
                                width="100px"
                                height="60px"
                                :src="require('./image/funkylogo.png')"/>
                    </div>
                </van-col>
                <van-col span="12">
                    <van-button type="default" v-show="isLoginShow" to="/Login" style="width:200px;background-color: transparent;color: red; border: none;font-size:12px;margin-top:10px">{{$t("login")}}</van-button>
                    <div class="language" style="width:200px;">
                        <van-button type="default"  style="background-color: transparent;margin-left:70px;border: none;font-size:12px" @click="isShowLanguage">{{$t("Language")}}</van-button>
                        <van-popup v-model="isLanguage" position="bottom" :style="{ height: '30%' }">
                            <template v-for="(item,index) in language">
                                <van-cell :key="index" :title="item.name" @click="languageChange(index)" style="text-align:center;" />
                            </template>
                        </van-popup>
                    </div>
                </van-col>
            </van-row>
            <van-search
                    show-action
                    :placeholder="$t('placeholder')"
                    @focus="allSearch"
                    @search="onSearch"
                    background="rgb(178,215,252)">
                <template #action>
                    <div @click="onSearch" class="flicker">{{$t("search")}}</div>
                </template>
            </van-search>
        </div>
        </van-sticky>
        <!--展示区-->
           <div id="main-box">
                    <!--轮播图展示-->
                    <div class="banner-box">
                        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="height:200px">
                            <van-swipe-item>
                                <van-image
                                        height="100%"
                                        width="100%"
                                        :src="require('./image/banner3.png')"
                                />
                            </van-swipe-item>
                            <van-swipe-item>
                                <van-image
                                        height="100%"
                                        width="100%"
                                        :src="require('./image/banner4.jpg')"
                                />
                            </van-swipe-item>
                            <van-swipe-item>
                                <van-image
                                        height="100%"
                                        width="100%"
                                        :src="require('./image/banner2.png')"
                                />
                            </van-swipe-item>
                            <van-swipe-item>
                                <van-image
                                        height="100%"
                                        width="100%"
                                        :src="require('./image/banner1.png')"
                                />
                            </van-swipe-item>
                        </van-swipe>
                    </div>
                    <!--宫格商品展示-->
<!--                    <div class="grid-box">-->
<!--                        <van-grid :border="false" :column-num="4">-->
<!--                            <van-grid-item>-->
<!--                                <van-image-->
<!--                                        height="40%"-->
<!--                                        :src="require('./image/icon_1.png')"-->
<!--                                />-->
<!--                                <div style="font-size:10px">{{$t("dress")}}</div>-->
<!--                            </van-grid-item>-->
<!--                            <van-grid-item>-->
<!--                                <van-image-->
<!--                                        height="40%"-->
<!--                                        :src="require('./image/icon_2.png')"-->
<!--                                />-->
<!--                                <div style="font-size:10px">{{$t("skirt")}}</div>-->
<!--                            </van-grid-item>-->
<!--                            <van-grid-item>-->
<!--                                <van-image-->
<!--                                        height="40%"-->
<!--                                        :src="require('./image/icon_3.png')"-->
<!--                                />-->
<!--                                <div style="font-size:10px">{{$t("pants")}}</div>-->
<!--                            </van-grid-item>-->
<!--                            <van-grid-item>-->
<!--                                <van-image-->
<!--                                        height="40%"-->
<!--                                        :src="require('./image/icon_4.png')"-->
<!--                                />-->
<!--                                <div style="font-size:10px">{{$t("jacket")}}</div>-->
<!--                            </van-grid-item>-->
<!--                        </van-grid>-->
<!--                        <van-grid :border="false" :column-num="4">-->
<!--                            <van-grid-item>-->
<!--                                <van-image-->
<!--                                        height="40%"-->
<!--                                        :src="require('./image/icon_5.png')"-->
<!--                                />-->
<!--                                <div style="font-size:10px">{{$t("trousers")}}</div>-->
<!--                            </van-grid-item>-->
<!--                            <van-grid-item>-->
<!--                                <van-image-->
<!--                                        height="40%"-->
<!--                                        :src="require('./image/icon_6.png')"-->
<!--                                />-->
<!--                                <div style="font-size:10px">{{$t("sweater")}}</div>-->
<!--                            </van-grid-item>-->
<!--                            <van-grid-item>-->
<!--                                <van-image-->
<!--                                        height="40%"-->
<!--                                        :src="require('./image/icon_7.png')"-->
<!--                                />-->
<!--                                <div style="font-size:10px">{{$t("windbreak")}}</div>-->
<!--                            </van-grid-item>-->
<!--                            <van-grid-item>-->
<!--                                <van-image-->
<!--                                        height="40%"-->
<!--                                        :src="require('./image/icon_8.png')"-->
<!--                                />-->
<!--                                <div style="font-size:10px">{{$t("coat")}}</div>-->
<!--                            </van-grid-item>-->
<!--                        </van-grid>-->
<!--                    </div>-->
                     <!--大促活动展示-->
                    <div  class="big-box" v-show="isShow">
                      <van-image
                              width="100%"
                              height="90px"
                              @click="bigSaleShow()"
                              :src="require('./image/dachu.png')"/>
                  </div>
                    <!--秒杀活动展示-->
                    <div class="kill-box">
                                <div style="margin-top: -10px">
                                    <van-divider :style="{ color:'black', borderColor: 'black', padding: '0 16px' }">
                                        <van-image
                                                width="100px"
                                                height="40px"
                                                :src="require('./image/kill.png')"/>
                                    </van-divider>
                                </div>
                        <!--商品渲染-->
                        <van-row type="flex" justify="space-around">
                            <template v-for="(item,i) in killInfo.slice(0,3)" >
                            <van-col span="7" :key="i">
                                <van-card
                                      :thumb="imgsrc+item.img"
                                >
                                    <template  #footer>
                                        <div class="van-multi-ellipsis--l2" style="margin-top:10px;font-size:12px;">
                                            {{item.title}}
                                        </div>
                                        <div style="margin-top:15px;font-size:12px;">
                                    <van-button round type="danger" size="mini" @click="buy(item.id,2)">{{$t('rush')}}</van-button>
                                        </div>
                                    </template>
                                </van-card>
                            </van-col>
                            </template>
                        </van-row>
                    <div style="margin-top:10px">
                   <van-divider :style="{ color:'black', borderColor: 'black', padding: '0 15px' }">
                       <van-button plain   @click="more()" style="border:0px;font-size:12px;">{{$t("more")}}>></van-button>

                   </van-divider>
               </div>
                    </div>
                    <!--推荐商品展示-->
                    <div class="good-box">
                        <van-tabs>
                            <van-tab :title="$t('new')" name="a">
                                <van-row type="flex" justify="space-around">
                                    <template v-for="(item,i) in goodsInfo.slice(0,6)" >
                                <van-col span="12" :key="i">
                                    <van-card
                                            :price="item.price.toFixed(2)"
                                            :title=item.title
                                            :thumb="imgsrc+item.img"
                                             @click="buy(item.id,0)">
                                    </van-card>
                                </van-col>
                                    </template>
                            </van-row>
                            </van-tab>
                            <van-tab :title="$t('curation')" name="b">
                                <van-row type="flex" justify="space-around">
                                    <template v-for="(item,i) in goodsInfo.slice(6,12)" >
                                        <van-col span="12" :key="i">
                                            <van-card
                                                    :price="item.price.toFixed(2)"
                                                    :title="item.title"
                                                    :thumb="imgsrc+item.img"
                                                    @click="buy(item.id,0)">
                                            </van-card>
                                        </van-col>
                                    </template>
                                </van-row>
                            </van-tab>
                            <van-tab :title="$t('trend')" name="c">
                                <van-row type="flex" justify="space-around">
                                    <template v-for="(item,i) in goodsInfo.slice(12,18)" >
                                        <van-col span="12" :key="i">
                                            <van-card
                                                    :price="item.price.toFixed(2)"
                                                    :title="item.title"
                                                    :thumb="imgsrc+item.img"
                                                    @click="buy(item.id,0)">
                                            </van-card>
                                        </van-col>
                                    </template>
                                </van-row>
                            </van-tab>
                        </van-tabs>
                    </div>
           </div>
<!--        </van-sticky>-->
    </div>

</template>

<script>
    import {goodsList, getLanguage, getKill, getzfbToken, getSkillGoods} from "@/api/api"
import img from "@/api/api"

    import {Toast} from "vant";
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Home",

    created() {
        // getzfbToken().then((response)=>{
        //       if(response.data.code===2000){
        //         if(response.data.data.token !== ""){
        //           let result = response.data.data.token
        //           console.log(result)
        //           localStorage.setItem("token",result);
        //         }
        //       }
        // })
      this.token= localStorage.getItem("token");
      console.log(this.token)
      if (this.token==="null" || this.token=== '' || this.token===undefined||this.token===null){
        this.isLoginShow=true;
        console.log("wbsk")

      }else
      {
        this.isLoginShow=false;
        console.log("wsk")

      }
      //dataString是整数，否则要parseInt转换
      var time = new Date(new Date().getTime());
      var year = time.getFullYear();
      var month = time.getMonth()+1;
      var day = time.getDate();
      var hour = time.getHours();
      var minute = time.getMinutes();
      var second = time.getSeconds();
      this.nowTime=year+'-'+(month<10?'0'+month:month)+'-'+(day<10?'0'+day:day)+' '+(hour<10?'0'+hour:hour)+':'+(minute<10?'0'+minute:minute)+':'+(second<10?'0'+second:second)
      console.log(this.nowTime)
        getKill().then((response) => {
                if(response.data.code===2000){
            this.active=response.data.data.activityList
            for (let i = 0; i <this.active.length ; i++) {
                    if(this.active[i].id==1){
                       this.startTime=new Date(Date.parse(this.active[i].startTime));
                        this.endTime=new Date(Date.parse(this.active[i].endTime));
                        this.nowTime=new Date(Date.parse(this.nowTime));

                        if(this.startTime<=this.nowTime&&this.endTime>=this.nowTime){
                         this.isShow=true;
                            }else{
                            this.isShow=false;
                        }
                    }
            }
                }else{
                    Toast(response.data.message);
                }
            // console.log(this.active)
        });

        getSkillGoods().then((response) => {
            if(response.data.code===2000){
                this.killInfo=response.data.data.goodList;
            }else {
                Toast(response.data.message);
            }
        });

        goodsList().then((response) => {
                if(response.data.code===2000) {
                    this.goodsInfo = response.data.data.goodList
                }else{
                    Toast(response.data.message);
                }

      });
        getLanguage().then((response) => {
                if(response.data.code===2000) {
                    this.language = response.data.data.languageList
                }else{
                    Toast(response.data.message);
                }
        })

    },
  data() {

        return {
            startTime:"",
            endTime:"",
            nowTime:"",
            token:null,
            language:[],
            imgsrc:img.src,
            isShow:false,
            isLoginShow:true,
            isLanguage:false,
            goodsInfo:[],
            active:[],
            killInfo:[],
        };
    },
    methods:{
        languageChange(index){
            if(index==0){
                this.$i18n.locale='zh'
            }else{
                this.$i18n.locale='en'
            }
            this.isLanguage=false;
        },
        isShowLanguage(){
            this.isLanguage=true;
        },
        onSearch(){

        },
        allSearch(){
        this.$router.push({path:'/searchDetail'})
        },
        more(){
            this.$router.push({path:'/seckillDetail'})
        },
        buy(gid,aid){
            this.$router.push({path:'/goodDetail',
                query:{
                    goodId:gid,
                    aid:aid,
                }
                },

            )
        },
        bigSaleShow(){
            this.$router.push({path:'/bigSaleDetail',
                query:{
                    aid:1
                }
            })
        }

    },


}
</script>

<style scoped>
    /deep/  [data-v-3dd2e005] .van-grid-item__content {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        height: 100%;
        padding: 0px 15px;
        background-color: #fff;
    }
    .good-box{
        margin-bottom:100px;
    }
    select option {
        color: rgb(36, 31, 31);
        font-size:smaller;
    }
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }
   #main-box{
       overflow-x: hidden;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
   }
    #home-box{
        background-color:white;
    }
    #header-box{
        background: linear-gradient(180deg, #a1c4fd 0%, #c2e9fb 100%);

    }
    .big-box{
        margin-top:5px;
        width:90%;height:90px;
        margin-right: auto;
        margin-left: auto
    }
    .flicker{
        color:black; /*设置文字颜色*/
        font-size:14px; /*设置字体大小*/
        font-weight:bolder; /*设置字体粗细*/
    }
    .kill-box{
        margin-top:10px;
    }
    /deep/ .van-grid-item__content {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        box-sizing: border-box;
        height: 100%;
        padding: 1px 23px;
        background-color: #fff;
    }
    /deep/ .van-sidebar-item--select, .van-sidebar-item--select:active {
        background-color:white;
    }
    /deep/ .van-sidebar-item {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 1px 12px;
        overflow: hidden;
        color: #323233;
        font-size: 14px;
        line-height: 20px;
        background-color: white;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }
    /deep/ .van-card {
        position: relative;
        box-sizing: border-box;
        padding: 5px 12px;
        color: #323233;
        font-size: 12px;
        background-color: white;
        border-radius: 8px;
    }
    /deep/ .van-card__footer {
        flex: none;
        text-align: center;
    }
    /deep/ [data-v-3dd2e005] .van-card {
        position: relative;
        box-sizing: border-box;
        padding: 8px 12px;
        color: #323233;
        font-size: 12px;
        background-color: white;
        border-radius: 8px;
    }


</style>
